<template>
	<!-- 查看已经预约的信息 -->
	<div>
		<h2>查看已经预约的信息</h2>
		<div class="table">
			<el-table :data="tableData" ref="multipleTable" stripe>
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column
					prop="customerRoomAppName"
					label="场馆名称"
					align="center"
				></el-table-column>
				<el-table-column
					prop="customerRoomAppDate"
					label="预约场馆日期"
					align="center"
				></el-table-column>
				<el-table-column
					prop="customerRoomAppTimeScope"
					label="预约场馆时间"
					align="center"
				></el-table-column>
				<el-table-column
					prop="customerRoomAppUsername"
					label="预约发起人"
					align="center"
				></el-table-column>
				<el-table-column prop="customerRoomAppRemark" label="备注" align="center"></el-table-column>
				<el-table-column prop="isAgreed" label="处理结果" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.agree == 0" style="font-weight: bold; color: green">未审核</span>
						<span v-else-if="scope.row.agree == 2" style="font-weight: bold">通过</span>
						<span v-else-if="scope.row.agree == 3" style="font-weight: bold; color: red">拒绝</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页pagination -->
		<div class="pagination" align="center">
			<el-pagination
				small
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page.currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import { appoinmentRoomsListCustomerRoomApp } from '@/APIs/index/index'
export default {
	name: 'ViewAppointment',
	data() {
		return {
			list: [],
			tableData: [],
			page: {
				currentPage: 1,
				pageSize: 10,
				total: 0
			},
			venuesDetailsList: []
		}
	},
	created() {
		// this.handleCurrentChange()
	},
	mounted() {
		this.ViewAppointment()
	},
	methods: {
		// 页面加载完成直接渲染已预约数据到表格
		async ViewAppointment() {
			const data = await appoinmentRoomsListCustomerRoomApp()
			// console.log(data.data.list)
			for (let i = 0; i < data.data.list.length; i++) {
				this.tableData.push({
					agree: data.data.list[i].agree, //
					customerRoomAppCreateTime: data.data.list[i].customerRoomAppCreateTime, // 发起时间
					customerRoomAppEquipment: data.data.list[i].customerRoomAppEquipment, // 事物
					customerRoomAppName: data.data.list[i].customerRoomAppName, // 类型
					customerRoomAppStatus: data.data.list[i].customerRoomAppStatus, // 状态
					customerRoomAppApprover: data.data.list[i].customerRoomAppApprover, // 审核人
					customerRoomAppDate: data.data.list[i].customerRoomAppDate, // 预约日期
					customerRoomAppRemark: data.data.list[i].customerRoomAppRemark, // 备注
					customerRoomAppTimeScope: data.data.list[i].customerRoomAppTimeScope, // 预约时间段
					customerRoomAppUsername: data.data.list[i].customerRoomAppUsername // 预约人
				})
			}
			// console.log(this.tableData)
			const { currentPage: pageNum, pageSize } = this.page
			const {
				data: { list = [], total }
			} = await appoinmentRoomsListCustomerRoomApp({
				pageNum,
				pageSize
			})
			this.tableData = list.map(item => ({ ...item, visible: false }))
			this.venuesDetailsList = list
			this.page.total = total
			// console.log(list, total)
		},
		// 点击下一页
		async handleCurrentChange(val) {
			this.page.currentPage = val
			console.log(val);
			const { currentPage: pageNum, pageSize } = this.page
			console.log(this.page);
			const {
				data: { list = [], total }
			} = await appoinmentRoomsListCustomerRoomApp({
				pageNum,
				pageSize
			})
			console.log(this.page);
			this.tableData = list.map(item => ({ ...item, visible: false }))
			console.log(this.tableData);
			this.venuesDetailsList = list
			this.page.total = total
			console.log(list, total)
		},
		handleSizeChange() {}
	}
}
</script>

<style>
.table {
	margin-bottom: 15px;
}
</style>